<script setup lang="ts">
import {StrUtil} from '@xtail/core'
import Hierarchy from '@iconify-icons/tabler/hierarchy'
import HierarchyOff from '@iconify-icons/tabler/hierarchy-off'
import {XCollapseBtn} from '../XCollapseBtn'
import type {CascadeBtnPropsType} from './types'

defineOptions({
  name: 'XCascadeBtn',
})

const props = withDefaults(defineProps<CascadeBtnPropsType>(), {
  iconProps: {} as any,
  text: '级联选择',
  btnProps: {} as any,
  click: () => {
  },
  collapse: false,
  disabled: false,
  tooltipProps: {} as any
})

const cascade = defineModel('cascade', {default: false})

const slots = useSlots()

const handleClick = (evt: MouseEvent) => {
  cascade.value = !cascade.value
  props.click(evt)
}
</script>

<template>
  <XCollapseBtn
    :icon-props="{
      iconProps: {
        icon: cascade ? Hierarchy : HierarchyOff
      },
      ...iconProps
    }"
    :text="StrUtil.isStr(text) ? text : (cascade ? text[0] : text[1])"
    :btn-props="{
      dashed: !cascade,
      ...btnProps,
    }"
    :click="handleClick"
    :collapse="collapse"
    :disabled="disabled"
    :tooltip-props="tooltipProps"
  >
    <template v-if="slots['btn-icon']" #btn-icon>
      <slot name="btn-icon"/>
    </template>
  </XCollapseBtn>
</template>

<style scoped lang="scss">

</style>
